<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',border:true,split:true," title="分类管理" style="width:150px; padding:5px;">
        <ul id="wu-category-tree" class="easyui-tree"></ul>
    </div>
    <div data-options="region:'center',border:false">
        <!-- Begin of toolbar -->
        <div id="wu-toolbar">
            <div class="wu-toolbar-button">
                <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>

            </div>
            <div class="wu-toolbar-search">
                <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
                <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
               <!-- <label>用户组：</label>-->
            <!--    <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="0">选择用户组</option>
                <option value="1">黄钻</option>
                <option value="2">红钻</option>
                <option value="3">蓝钻</option>
                </select>-->
                <label>关键词：</label><input class="wu-text" style="width:100px">
                <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
            </div>
        </div>
        <div id="content">
    <!--        <table>
            <tr class="datagrid-header-row">
                <td>
                    <div class="datagrid-header-check">
                        <input type="checkbox"></div>
                </td><td field="productid" class=""><div class="datagrid-cell" style="width: 156px;">
                <span>用户ID</span>
                <span class="datagrid-sort-icon">&nbsp;</span></div></td><td field="productname" class=""><div class="datagrid-cell" style="width: 288px;"><span>用户名</span>
                <span class="datagrid-sort-icon">&nbsp;</span></div></td><td field="unitcost" class=""><div class="datagrid-cell" style="width: 156px;"><span>密码</span>
                <span class="datagrid-sort-icon">&nbsp;</span></div></td><td field="listprice" class=""><div class="datagrid-cell" style="width: 156px;"><span>email</span>
                <span class="datagrid-sort-icon">&nbsp;</span></div></td><td field="attr1" class=""><div class="datagrid-cell" style="width: 156px;"><span>phone</span>
                <span class="datagrid-sort-icon">&nbsp;</span></div></td><td field="itemid" class=""><div class="datagrid-cell" style="width: 156px;"><span>status</span>
                <span class="datagrid-sort-icon">&nbsp;</span></div></td><td field="status" class=""><div class="datagrid-cell" style="width: 159px;"><span>部门ID</span>
                <span class="datagrid-sort-icon">&nbsp;</span></div></td><td field="status" class=""><div class="datagrid-cell" style="width: 159px;"><span>创建时间</span>
                <span class="datagrid-sort-icon">&nbsp;</span></div></td></tr>

            </table>-->
        </div>
            <!--<div class="datagrid-pager pagination"><table cellspacing="0" cellpadding="0" border="0">-->
                <!--<tbody><tr><td><select class="pagination-page-list"><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option></select></td><td><div class="pagination-btn-separator"></div></td><td><a href="javascript:void(0)" class="l-btn l-btn-plain l-btn-disabled l-btn-plain-disabled" group="" id=""><span class="l-btn-left"><span class="l-btn-text"><span class="l-btn-empty pagination-first">&nbsp;</span></span></span></a></td><td><a href="javascript:void(0)" class="l-btn l-btn-plain l-btn-disabled l-btn-plain-disabled" group="" id=""><span class="l-btn-left"><span class="l-btn-text"><span class="l-btn-empty pagination-prev">&nbsp;</span></span></span></a></td><td><div class="pagination-btn-separator"></div></td><td><span style="padding-left:6px;">第</span></td><td><input class="pagination-num" type="text" value="1" size="2"></td><td><span style="padding-right:6px;">共3页</span></td><td><div class="pagination-btn-separator"></div></td><td><a href="javascript:void(0)" class="l-btn l-btn-plain" group="" id=""><span class="l-btn-left"><span class="l-btn-text"><span class="l-btn-empty pagination-next">&nbsp;</span></span></span></a></td><td><a href="javascript:void(0)" class="l-btn l-btn-plain" group="" id=""><span class="l-btn-left"><span class="l-btn-text"><span class="l-btn-empty pagination-last">&nbsp;</span></span></span></a></td><td><div class="pagination-btn-separator"></div></td><td><a href="javascript:void(0)" class="l-btn l-btn-plain" group="" id=""><span class="l-btn-left"><span class="l-btn-text"><span class="l-btn-empty pagination-load">&nbsp;</span></span></span></a></td></tr></tbody></table><div class="pagination-info">显示1到20,共50记录</div><div style="clear:both;"></div></div>-->

            <!-- End of toolbar -->
        <table id="wu-datagrid" toolbar="#wu-toolbar"></table>
    </div>
</div>
<!-- Begin of easyui-dialog -->
<div id="wu-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
    <form id="wu-form" method="post">
        <table>
            <tr>
                <td width="60" align="right">姓 名:</td>
                <td><input type="text" name="name" class="wu-text" /></td>
            </tr>
            <tr>
                <td align="right">邮 箱:</td>
                <td><input type="text" name="email" class="wu-text" /></td>
            </tr>
            <tr>
                <td align="right">主 题:</td>
                <td><input type="text" name="subject" class="wu-text" /></td>
            </tr>
            <tr>
                <td valign="top" align="right">内 容:</td>
                <td><textarea name="content" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
            </tr>
        </table>
    </form>

    </div>

    <!-- End of easyui-dialog -->
<script type="text/javascript">
    // 调用 datagrid 方法把id为dg的标签转为 datagrid 组件
    $('#content').datagrid({
        url:'ChaXun',
        fit:true,
        fitColumns:true,
        toolbar:"#toolbar",
        pagination:true,
        //singleSelect:true,
        pageSize:5,
        pageList:[5,10,15,20],
        // 指定表格中的列
        columns:[[
            // 每一个{}的信息就表示一个列
            // field: 表示要显示的数据的属性名
            // title: 列的标题
            {field:'userId',title:'用户ID',checkbox:true},
            {field:'username',title:'用户名',width:100},
            /*{field:'password',title:'密码',width:100},*/
            {field:'email',title:'邮箱',width:100},
            {field:'mobile',title:'联系方式',width:100},
            {field:'status',title:'状态',width:100},
            {field:'deptId',title:'部门编号',width:100},
            {field:'createTime',title:'创建时间',width:100}
            //{field:'DepID',title:'部门编号',width:100,align:'right'}
        ]]
    });






    /**
     * Name 载入菜单树
     */
    $('#wu-category-tree').tree({
        url:'temp/menu.php',
        onClick:function(node){
            alert(node.text);
        }
    });

    /**
     * Name 添加记录
     */
    function add(){
        $('#wu-form').form('submit', {
            url:'',
            success:function(data){
                if(data){
                    $.messager.alert('信息提示','提交成功！','info');
                    $('#wu-dialog').dialog('close');
                }
                else
                {
                    $.messager.alert('信息提示','提交失败！','info');
                }
            }
        });
    }

    /**
     * Name 修改记录
     */
    function edit(){
        $('#wu-form').form('submit', {
            url:'',
            success:function(data){
                if(data){
                    $.messager.alert('信息提示','提交成功！','info');
                    $('#wu-dialog').dialog('close');
                }
                else
                {
                    $.messager.alert('信息提示','提交失败！','info');
                }
            }
        });
    }

    /**
     * Name 删除记录
     */
    function remove(){
        $.messager.confirm('信息提示','确定要删除该记录？', function(result){
            if(result){
                var items = $('#wu-datagrid').datagrid('getSelections');
                var ids = [];
                $(items).each(function(){
                    ids.push(this.productid);
                });
                //alert(ids);return;
                $.ajax({
                    url:'',
                    data:'',
                    success:function(data){
                        if(data){
                            $.messager.alert('信息提示','删除成功！','info');
                        }
                        else
                        {
                            $.messager.alert('信息提示','删除失败！','info');
                        }
                    }
                });
            }
        });
    }

    /**
     * Name 打开添加窗口
     */
    function openAdd(){
        $('#wu-form').form('clear');
        $('#wu-dialog').dialog({
            closed: false,
            modal:true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: add
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog').dialog('close');
                }
            }]
        });
    }

    /**
     * Name 打开修改窗口
     */
    function openEdit(){
        $('#wu-form').form('clear');
        var item = $('#wu-datagrid').datagrid('getSelected');
        //alert(item.productid);return;
        $.ajax({
            url:'',
            data:'',
            success:function(data){
                if(data){
                    $('#wu-dialog').dialog('close');
                }
                else{
                    //绑定值
                    $('#wu-form').form('load', data)
                }
            }
        });
        $('#wu-dialog').dialog({
            closed: false,
            modal:true,
            title: "修改信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: edit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog').dialog('close');
                }
            }]
        });
    }

    /**
     * Name 分页过滤器
     */
    function pagerFilter(data){
        if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage:function(pageNum, pageSize){
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});
                dg.datagrid('loadData',data);
            }
        });
        if (!data.originalRows){
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }

    /**
     * Name 载入数据
     */
    $('#wu-datagrid').datagrid({
        url:'temp/datagrid.php',
        loadFilter:pagerFilter,
        rownumbers:true,
        singleSelect:false,
        pageSize:20,
        pagination:true,
        multiSort:true,
        fitColumns:true,
        fit:true,
        columns:[[
            { checkbox:true},
            { field:'productid',title:'productid',width:100,sortable:true},
            { field:'productname',title:'productname',width:180,sortable:true},
            { field:'unitcost',title:'unitcost',width:100},
            { field:'listprice',title:'listprice',width:100},
            { field:'attr1',title:'attr1',width:100},
            { field:'itemid',title:'itemid',width:100},
            { field:'status',title:'status',width:100}
        ]]
    });
</script>